<template>
    <div class="bigbox">
        <div class="imgbox1"><img src="../img/2e4cfdcdd58fa42f215197ef40f9f43.png" alt=""></div>
        <div class="us">
            <div class="left">
                <div class="eng">
                    CONTACT US
                </div>
                <div class="china">联系我们</div>
            </div>
            <div class="right">
                <div>当前位置：首页>联系我们</div>
            </div>
        </div>
        <hr>
        <div class="logoto">
            <div class="minbox">
                <div>公司联系方式</div>
            </div>
        </div>
        <div class="info">
            <div v-for="item in infoarry" :key="item">
                <h1>{{ item.h1 }}</h1>
                <h3>{{ item.h4 }}</h3>
                <h3>{{ item.h44 }}</h3>
            </div>
        </div>
        <div class="logoto">
            <div class="minbox">
                <div>个人简历投放</div>
            </div>
        </div>
        <div class="board">
            <div>姓名：<input type="text" placeholder="请输入你的姓名" class="workinfo" v-model="name"> </div>
            <div>联系方式：<input type="text" placeholder="填写你的电话号码" class="workinfo" v-model="phone"></div>
            <div>个人邮编：<input type="text" placeholder="填入你的个人邮箱" class="workinfo" v-model="email"></div>
            <div>家庭住址：<input type="text" placeholder="填写你的家庭住址" class="workinfo" v-model="local"></div>
            <div>学历 <el-select v-model="value" class="m-2 " placeholder="选择你的学历" size="large">
                    <el-option v-for="item in eduarry" :key="item.value" :label="item.label" :value="item.value" />
                </el-select></div>
            <div>年龄<input type="text" placeholder="填入你的年龄" class="workinfo" v-model="age"></div>
            <div>应聘的职位： <el-select v-model="value2" class="m-2" placeholder="选择你的职位" size="large">
                    <el-option v-for="item in workarry" :key="item.value" :label="item.label" :value="item.value" />
                </el-select></div>
            <div>工资意向：<input type="text" placeholder="填入你的理想工资水平" class="workinfo" v-model="money"></div>

        </div>
        <div class="sum"> <el-button :plain="true" @click="open2">提交简历</el-button><el-button :plain="true"
                @click="open">点击查看简历</el-button></div>
        <!-- <son></son> -->
        <teleport to="body">
            <div class="bigmask" v-show="isShow">
                <div class="mask">
                    <h3>姓名：{{ nameto }}</h3><br>
                    <h3>联系方式：{{ phoneto }}</h3><br>
                    <h3>个人邮编：{{ emailto }}</h3><br>
                    <h3>家庭住址：{{ localto }}</h3><br>
                    <h3>学历：{{ valueto }}</h3><br>
                    <h3>年龄：{{ ageto }}</h3><br>
                    <h3>应聘的职位：{{ valueto2 }}</h3><br>
                    <h3>工资意向：{{ moneyto }}</h3><br>
                    <el-button :plain="true" @click="isShow = false" style="margin-left: 220px;">关闭</el-button>
                </div>
            </div>
        </teleport>

    </div>
</template>

<script>
import { son } from '../coms/son.vue';
import { computed, reactive, ref, watch } from 'vue'
import { ElMessage, ElNotification } from 'element-plus'
export default {
    components: { son, },
    setup() {
        let isShow = ref(false)
        let infoarry = reactive([
            { h1: '通信·TelePhone', h4: '24小时手机热线:123-65465-4565', h44: '招商热线:165-465165-465' },
            { h1: '地址·Address', h4: '北京劳动苦力有限公司', h44: '地址：北京市朝阳路凤凰街34号' },
            { h1: '投递·Delivery', h4: '传真：08805065215', h44: 'E-mail:31480880964@qq.com' },
        ])
        // 学历选择
        let value = ref('')
        let eduarry = reactive([
            {
                value: '小学',
                label: '小学',
            },
            {
                value: '初中',
                label: '初中',
            },
            {
                value: '高中',
                label: '高中',
            },
            {
                value: '专科',
                label: '专科',
            },
            {
                value: '本科',
                label: '本科',
            },
            {
                value: '研究生',
                label: '研究生',
            },
            {
                value: '博士',
                label: '博士',
            },
            {
                value: '博士后',
                label: '博士后',
            }
        ])
        // 职位选择
        let value2 = ref('')
        let workarry = reactive([
            {
                value: '板砖力士',
                label: '板砖力士',
            },
            {
                value: '制砖专家',
                label: '制砖专家',
            },
            {
                value: '板砖工程师',
                label: '板砖工程师',
            },
            {
                value: '砖业规划师',
                label: '砖业规划师',
            }
        ])

        // 提交的个人信息
        let name = ref(null)
        let phone = ref(null)
        let email = ref(null)
        let age = ref(null)
        let money = ref(null)
        let local = ref(null)
        // 看数据
        let nameto3 = ref(null)
        let phoneto3 = ref(null)
        let emailto3 = ref(null)
        let ageto3 = ref(null)
        let moneyto3 = ref(null)
        let localto3 = ref(null)
        let valueto3 = ref('')
        let valueto23 = ref('')
        // 提交按钮
        function open() {
            if (name.value == null || phone.value == null || email.value == null || age.value == null || money.value == null || value.value == null || value2.value == null || local.value == null) {
                ElMessage({
                    message: '请正确完善填写你的信息',
                    type: 'warning',
                })
                name.value = null,
                    phone.value = null,
                    email.value = null,
                    age.value = null,
                    money.value = null,
                    value.value = null,
                    value2.value = null,
                    local.value = null
            } else {
                isShow.value = true
            }

            console.log(isShow);
        }
        let phoneto = computed({
            get() {
                return phoneto3.value
            }
        })
        let emailto = computed({
            get() {
                return emailto3.value
            }
        })
        let ageto = computed({
            get() {
                return ageto3.value
            }
        })
        let moneyto = computed({
            get() {
                return moneyto3.value
            }
        })
        let localto = computed({
            get() {
                return localto3.value
            }
        })
        let valueto = computed({
            get() {
                return valueto3.value
            }
        })
        let valueto2 = computed({
            get() {
                return valueto23.value
            }
        })
        let nameto = computed({
            get() {
                return nameto3.value
            }
        })
        watch(phoneto, (newvalue, oldvalue) => {
            if (newvalue != oldvalue) {
                console.log(12154151);
                ElNotification({
                    title: '成功',
                    message: '提交改变简历成功',
                    duration: 0,
                })
            }
        })
        watch(emailto, (newvalue, oldvalue) => {
            if (newvalue != oldvalue) {
                console.log(12154151);
                ElNotification({
                    title: '成功',
                    message: '提交改变简历成功',
                    duration: 0,
                })
            }
        })
        watch(ageto, (newvalue, oldvalue) => {
            if (newvalue != oldvalue) {
                console.log(12154151);
                ElNotification({
                    title: '成功',
                    message: '提交改变简历成功',
                    duration: 0,
                })
            }
        })
        watch(moneyto, (newvalue, oldvalue) => {
            if (newvalue != oldvalue) {
                console.log(12154151);
                ElNotification({
                    title: '成功',
                    message: '提交改变简历成功',
                    duration: 0,
                })
            }
        })
        watch(localto, (newvalue, oldvalue) => {
            if (newvalue != oldvalue) {
                console.log(12154151);
                ElNotification({
                    title: '成功',
                    message: '提交改变简历成功',
                    duration: 0,
                })
            }
        })
        watch(valueto, (newvalue, oldvalue) => {
            if (newvalue != oldvalue) {
                console.log(12154151);
                ElNotification({
                    title: '成功',
                    message: '提交改变简历成功',
                    duration: 0,
                })
            }
        })
        watch(valueto2, (newvalue, oldvalue) => {
            if (newvalue != oldvalue) {
                console.log(12154151);
                ElNotification({
                    title: '成功',
                    message: '提交改变简历成功',
                    duration: 0,
                })
            }
        })
        function open2() {
            if (name.value == null || phone.value == null || email.value == null || age.value == null || money.value == null || value.value == null || value2.value == null || local.value == null) {
                ElMessage({
                    message: '请正确完善填写你的信息',
                    type: 'warning',
                })
                name.value = null,
                    phone.value = null,
                    email.value = null,
                    age.value = null,
                    money.value = null,
                    value.value = null,
                    value2.value = null,
                    local.value = null
            } else {
                ElMessage({
                    message: '恭喜提交简历成功',
                    type: 'success',
                })
                nameto3.value = name.value,
                    phoneto3.value = phone.value,
                    emailto3.value = email.value,
                    ageto3.value = age.value,
                    moneyto3.value = money.value,
                    valueto3.value = value.value,
                    valueto23.value = value2.value,
                    localto3.value = local.value

                // name.value = null,
                //     phone.value = null,
                //     email.value = null,
                //     age.value = null,
                //     money.value = null,
                //     value.value = null,
                //     value2.value = null,
                //     local.value = null
            }
        }
        return {
            infoarry,
            eduarry,
            value,
            workarry,
            value2,
            open2,
            name,
            phone,
            email,
            age,
            money,
            local,
            nameto,
            phoneto,
            emailto,
            ageto,
            moneyto,
            localto,
            valueto,
            valueto2,
            isShow,
            open
        }
    },

}
</script>

<style lang="less" scoped>
.bigbox {
    color: @fontcor2;
}

.imgbox1 {
    height: 300px;
    width: 100%;
    overflow: hidden;

    img {
        width: 100%;
        height: 100%;
    }
}

.us {
    width: 100%;
    height: 100px;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .left {
        margin-left: 180px;
        margin-top: -20px;

        .eng {
            font-size: @fontsize2;
        }

        .china {
            font-size: @fontsize;
        }
    }

    .right {
        margin-right: 60px;
        margin-bottom: -45px;
    }
}

.logoto {
    width: 100%;
    height: 150px;
    display: flex;
    justify-content: space-around;
    align-items: center;

    .minbox {
        width: 150px;
        height: 35px;
        text-align: center;
        line-height: 35px;
        outline: 1px solid snow;
    }
}

.info {
    width: 100%;
    height: 200px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: start;

    h1 {
        color: aliceblue;
    }

    h3 {
        color: @fontcor2;
    }
}

.board {
    height: 300px;
    width: 1000px;
    // outline: 1px solid red;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: self-start;
    margin: auto;

    .workinfo {
        height: 40px;
        width: 215px;
        border-radius: 5px;
        color: rgb(0, 0, 0);
        background-color: rgba(255, 255, 255);
    }
}

.sum {
    height: 200px;
    width: 200px;
    margin: auto;
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.bigmask {
    position: absolute;
    width: 100vw;
    height: 100vw;
    background-color: rgba(230, 230, 230, 0.523);


    .mask {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        height: 600px;
        width: 500px;
        background-color: rgba(208, 212, 212, 0.639);
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        align-content: flex-start;
        justify-content: center;
        align-items: flex-start;
        border-radius: 50px;

        h3 {
            color: rgb(0, 0, 0);
        }

    }
}
</style>